{% extends "personal_center/base.html" %}

{% block page_link %}
    <link rel="stylesheet" href="../../static/system_setup/css/style.css">
    <link rel="stylesheet" type="text/css" href="../../static/personal_center/css/index.css">
    <link rel="stylesheet" type="text/css" href="../../static/personal_center/css/common.css">
    <script type="text/javascript" src="../../static/personal_center/js/index.js"></script>
{% endblock %}


{% block style %}
    <style>
        .add_class {
            background: #1E90FF;
        }

        .top_tag {
            border-bottom: #01AAED solid 2px;
            color: #01AAED;
        }

        .tab_top {
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            display: inline-block;

        }

    </style>
{% endblock %}


{% block right_content %}
    <div class="headline">
        <div class="tab_top"><a href="vehicle_use_info_view" style="color: black;">车辆使用</a></div>
        <div class="tab_top top_tag"><a href="vehicle_person_apply" style="color: black;">我的申请</a></div>

        <div style="width: 7%;line-height: 40px;float: right;text-align: right;padding-right: 15px;">
            <a href="vehicle_apply_index">
                <button style="height: 30px;width: 90%;border-radius: 3px;letter-spacing:2px;line-height: 30px;" id="add_station" type="button"
                        class="btn btn-default add-station">预订
                </button>
            </a>
        </div>
        <div style="width: 7%;text-align: center;height: 100%;line-height: 40px;float: right;">
            <button onclick="ConfirmDelete()" data-toggle="modal" data-target=".bd-example-modal-sm"
                    style="height: 30px;width: 90%;border-radius: 3px;" type="button"
                    class="btn btn-danger add-station1">删除
            </button>
        </div>
    </div>
    <!--确认删除？-->
    <div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-sm" style="margin-top: 20%;">
            <div class="modal-content" style="height: 100px;border-radius: 7px;width: 300px;background: #F8F8FF;">
                <div class="modal-body" style="height: 50px;line-height: 50px;text-align: center;">
                    <p id="Confirm-content" style="margin-left: 2%;letter-spacing:1px;"></p>
                </div>
                <div class="modal-footer" style="height: 40px;">
                    <button id="close-model2" type="button" class="btn btn-secondary" data-dismiss="modal"
                            style="height: 30px;line-height: 30px;border-radius: 3px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;取&nbsp;消&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    </button>
                    <button type="button" class="btn btn-primary"
                            style="margin-left: 2%;margin-right: 2%;height: 30px;line-height: 30px;border-radius: 3px;"
                            onclick="DeleteData()">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;确&nbsp;认&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div id="add_jurisdiction" style="width: 100%;height: 95.3%;overflow: auto;background-color: white">
        <div class="right-box" style="width: 100%;height: 100%;margin-top: 0;">
            <div style="height: 100%;width: 100%;overflow: auto;border-bottom: #cccccc solid 1px;background-color: white;">
                <section class="grid-main">
                    <table id="main_table"></table>
                </section>
            </div>
        </div>
    </div>

{% endblock %}

{% block script %}
    <script type="text/javascript" src="../../static/administrative/js/layer.js"></script>
    <script>
        window.onload = function () {
            document.getElementById("loading").style.display = "none";
            document.getElementById("personage").className = "add_class";
            document.getElementById("sponsor").className = "add-nav-active";
        };

        const gridManagerName = "test",
            arg = {
                gridManagerName: "test",
                width: "100%",
                height: "100%",
                autoOrderConfig: {fixed: "left"},
                checkboxConfig: {key: "id", fixed: "left"},
                supportAjaxPage: !0,
                sortMode: "single",
                supportMenu: !0,
                menuHandler: e => (e.unshift({
                    content: "自定义菜单", line: !0, onClick: e => {
                        alert(e)
                    }
                }), e),
                useCellFocus: !0,
                useHideRow: !0,
                supportMoveRow: !0,
                moveRowConfig: {
                    key: "priority", useSingleMode: !0, fixed: "left", handler: (e, t) => {
                        console.log(e, t)
                    }
                },
                disableCache: !1,
                ajaxData: function (e, t) {
                    var local_host = window.location.host;          // 获取当前IP
                    return "/personal-center/vehicle_use_info_view"
                },
                exportConfig: {
                    fileName: e => {
                        const t = new Date;
                        let a = `${t.getFullYear()}-${t.getMonth() + 1}-${t.getDate()}`;
                        for (let t in e) a = `${a}-${t}=${e[t]}`;
                        return a
                    }, suffix: "xls"
                },
                ajaxType: "POST",
                checkedBefore: function (e, t, a) {
                    return console.log("checkedBefore==", e, t, a), a && 90 === a.id && alert("该节点在checkedBefore中配置为不可选"), a && 90 !== a.id
                },
                emptyTemplate: e => `<div style="text-align: center;">${e.query.title ? "搜索为空" : "暂无数据"}</div>`,
                columnData: [
                    {
                        key: "subject",
                        text: "用车事由",
                        align: "center",
                    }, {
                        key: "route",
                        text: "出行路线",
                        align: "center",
                    }, {
                        key: "start_time",
                        text: "开始时间",
                        align: "center",
                    }, {
                        key: "end_time",
                        text: "结束时间",
                        align: "center",
                    }, {
                        key: "state",
                        text: "状态",
                        align: "center",
                    }, {
                        key: "current_audit_user",
                        text: "当前审核人",
                        align: "center",
                    }, {
                        key: "action",
                        width: "100px",
                        align: "center",
                        fixed: "right",
                        disableMoveRow: !0,
                        disableRowCheck: !0,
                        text: '<span style="color: red">操作</span>',
                        template: (e, t) => `<a class="plugin-action" id="${t.id}" href="javascript:;" onclick="">${t.url}</a>`
                    }]
            }, demo1 = {
                initSearch: function () {
                },
                initFN: () => {
                },
                initGM: function () {
                    new window.GridManager(table, arg, (e => {
                    }))
                },
                editRowData: function (e) {
                    window.GridManager.updateRowData("test", "id", {
                        id: window.parseInt(e.getAttribute("data-id")),
                        lastDate: (new Date).getTime()
                    })
                }
            }, table = document.querySelector("#main_table");
        demo1.initSearch(table), demo1.initGM(table), demo1.initFN();

        const table_name = '{{ table_name }}'

        function del_draft(id_0) {
            var id = id_0
            var r = confirm("确认删除？")
            if (r == true) {
                var xhr = new XMLHttpRequest();
                var local_host = window.location.host;          // 获取当前IP
                xhr.open('post', "/administrative/delete_draft_view", true);
                xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
                xhr.send("id=" + id + "&table_name=" + table_name);
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4) {
                        if (xhr.status === 200) {
                            document.getElementById("loading").style.display = "none";
                            var JsonDate = JSON.parse(xhr.responseText);
                            alert(JsonDate['message'])
                            window.location.reload();
                        }
                    }
                };
            }
        }

        function ConfirmDelete() {
            var myArray = []
            var check_box_list = document.getElementsByClassName("gm-radio-checkbox-input gm-checkbox-input");
            for (var t = 0; t < check_box_list.length - 1; t++) {
                if (check_box_list[t].checked) {
                    var remove_id = check_box_list[t].parentNode.parentNode.parentNode.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.firstChild.id;
                    myArray.push(remove_id)
                }
            }
            if (myArray.length === 0) {
                document.getElementById("Confirm-content").innerHTML = "没有选择删除的流程！";
            } else {
                document.getElementById("Confirm-content").innerHTML = "确认要删除这" + String(myArray.length) + "个流程吗？"
            }
        }


        // 批量删除数据
        function DeleteData() {
            var myArray = []
            var check_box_list = document.getElementsByClassName("gm-radio-checkbox-input gm-checkbox-input");
            for (var t = 0; t < check_box_list.length - 1; t++) {
                if (check_box_list[t].checked) {
                    var remove_id = check_box_list[t].parentNode.parentNode.parentNode.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.firstChild.id;
                    myArray.push(remove_id)
                }
            }
            if (myArray.length === 0) {
                document.getElementById("close-model2").click();
                return myArray
            }
            console.log("myArray: ", JSON.stringify(myArray))
            var xhr = new XMLHttpRequest();
            var local_host = window.location.host;          // 获取当前IP
            xhr.open('post', "/administrative/delete_in_batches", true);
            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
            xhr.send("delete_list=" + JSON.stringify(myArray) + "&table_name=" + table_name);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        var JsonDate = JSON.parse(xhr.responseText);
                        alert(JsonDate["message"]);
                        window.location.reload();
                    }
                }
            };
        }

        function change_mind(ele_id) {
            if (ele_id === "jurisdiction_list") {
                document.getElementById("jurisdiction_list").style.display = "inline-block";
                document.getElementById("add_jurisdiction").style.display = "none";
                document.getElementById("dispatch_detail_tab").className = "tab_top top_tag";
                document.getElementById("document_addressee_details_tab").className = "tab_top";
            } else {
                document.getElementById("add_jurisdiction").style.display = "inline-block";
                document.getElementById("jurisdiction_list").style.display = "none";
                document.getElementById("dispatch_detail_tab").className = "tab_top";
                document.getElementById("document_addressee_details_tab").className = "tab_top top_tag";
                var e = {
                    tab: 'apply'
                };
                table.GM("setQuery", e, (function () {
                    console.log("setQuery执行成功")
                }))
            }
        }

        function create_my_apply(my_apply_list) {
            if (!my_apply_list.length) {
                document.getElementById("img-display1").style.display = "inline-block";
            }
            var t_table1 = document.getElementById("t_table1");
            for (var i = 0; i < my_apply_list.length; i++) {
                var state = "";
                var tr = document.createElement("tr");
                if (my_apply_list[i]["state"] === "申请中" || my_apply_list[i]["state"] === "分管领导已审批" || my_apply_list[i]["state"] === "车队领导已审批") {
                    state = "审批中";
                    tr.style.color = "red";
                } else if (my_apply_list[i]["state"] === "车管办分管领导已审批") {
                    state = "完成";
                } else if (my_apply_list[i]["state"] === "作废") {
                    state = "作废";
                } else {
                    state = "拒绝";
                    tr.style.color = "#00CD66";
                }

                var td = document.createElement("td");
                var td1 = document.createElement("td");
                var td2 = document.createElement("td");
                var td3 = document.createElement("td");
                var td4 = document.createElement("td");
                var td5 = document.createElement("td");
                var td6 = document.createElement("td");
                var td7 = document.createElement("td");
                td.innerHTML = my_apply_list[i]["apply_user"];
                td.style.textAlign = "center";
                td1.innerHTML = my_apply_list[i]["start_time"];
                td1.style.textAlign = "center";
                td2.innerHTML = my_apply_list[i]["end_time"];
                td2.style.textAlign = "center";
                td3.innerHTML = my_apply_list[i]["subject"];
                td3.style.textAlign = "center";
                td4.innerHTML = my_apply_list[i]["route"];
                td4.style.textAlign = "center";
                td5.innerHTML = state;
                td5.style.textAlign = "center";
                if (my_apply_list[i]['state'] === "申请中" || my_apply_list[i]['state'] === "拒绝") {
                    td6.innerHTML = "<a href='Vehicle_apply_detail.html?type=ture&id=" + my_apply_list[i]["id"] + "'>查看</a> | <a style='color: dodgerblue;' href='#' onclick='do_cancel(" + my_apply_list[i]["id"] + ")'>作废</a>";
                } else {
                    td6.innerHTML = "<a href='Vehicle_apply_detail.html?type=ture&id=" + my_apply_list[i]["id"] + "'>查看</a>";
                }
                td6.style.textAlign = "center";
                td7.innerHTML = my_apply_list[i]["current_audit_user"];
                td7.style.textAlign = "center";
                tr.appendChild(td);
                tr.appendChild(td1);
                tr.appendChild(td2);
                tr.appendChild(td3);
                tr.appendChild(td4);
                tr.appendChild(td5);
                tr.appendChild(td7);
                tr.appendChild(td6);
                t_table1.appendChild(tr);
            }
        }

        function do_cancel(id) {
            document.getElementById("loading").style.display = "inline-block";
            var xhr = new XMLHttpRequest();
            var local_host = window.location.host;          // 获取当前IP
            xhr.open('post', "/personal-center/vehicle_apply_cancel_view");
            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
            xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
            xhr.send("id=" + id);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("loading").style.display = "none";
                        var JsonDate = JSON.parse(xhr.responseText);
                        if (JsonDate["code"] === 200) {
                            alert("作废成功");
                            location.reload();
                        } else {
                            alert(JsonDate["message"]);
                        }
                    }
                }
            };
        }

        function create_vehicle(vehicle_use_info_list) {
            if (!vehicle_use_info_list.length) {
                document.getElementById("img-display").style.display = "inline-block";
            }
            var t_table = document.getElementById("t_table");
            for (var j = 0; j < vehicle_use_info_list.length; j++) {
                var tr1 = document.createElement("tr");
                var td_0 = document.createElement("td");
                var td_1 = document.createElement("td");
                var td_2 = document.createElement("td");
                var td_3 = document.createElement("td");
                var td_4 = document.createElement("td");
                td_0.innerHTML = vehicle_use_info_list[j]["registration_number"];
                td_0.style.textAlign = "center";
                td_1.innerHTML = vehicle_use_info_list[j]["seat"];
                td_1.style.textAlign = "center";
                td_2.innerHTML = vehicle_use_info_list[j]["driver"];
                td_2.style.textAlign = "center";
                td_3.innerHTML = vehicle_use_info_list[j]["start_time"];
                td_3.style.textAlign = "center";
                td_4.innerHTML = vehicle_use_info_list[j]["end_time"];
                td_4.style.textAlign = "center";
                tr1.appendChild(td_0);
                tr1.appendChild(td_1);
                tr1.appendChild(td_2);
                tr1.appendChild(td_3);
                tr1.appendChild(td_4);
                t_table.appendChild(tr1);
            }
        }

        // 加载分页条
        function pagenum(dataTotals, page = 1) {
            new myPagination({
                id: 'pagination',
                curPage: page, //初始页码
                pageAmount: 20,  //每页多少条
                dataTotal: dataTotals, //总共多少条数据
                pageTotal: Math.ceil(parseInt(dataTotals, 10) / 20), //总页数
                pageSize: 5, //可选,分页个数
                showPageTotalFlag: true, //是否显示数据统计
                showSkipInputFlag: true, //是否支持跳转
                getPage: function (page) {
                    request_data(page, "1");
                }
            });
        }

        // 加载分页条
        function pagenum1(dataTotals, page = 1) {
            new myPagination1({
                id: 'pagination1',
                curPage: page, //初始页码
                pageAmount: 20,  //每页多少条
                dataTotal: dataTotals, //总共多少条数据
                pageTotal: Math.ceil(parseInt(dataTotals, 10) / 20), //总页数
                pageSize: 5, //可选,分页个数
                showPageTotalFlag: true, //是否显示数据统计
                showSkipInputFlag: true, //是否支持跳转
                getPage: function (page) {
                    request_data(page, "2");
                }
            });
        }

        function request_data(page, cuent_type) {
            document.getElementById("loading").style.display = "inline-block";
            var xhr = new XMLHttpRequest();
            var local_host = window.location.host;          // 获取当前IP
            xhr.open('get', "/personal-center/vehicle_use_info_view?page=" + String(page) + "&search=1&cuent_type=" + String(cuent_type), true);
            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("loading").style.display = "none";
                        var JsonDate = JSON.parse(xhr.responseText);
                        console.log(JsonDate)
                        if (cuent_type === "1") {
                            create_vehicle(JsonDate["my_apply_list"]);
                            pagenum(JsonDate["apply_data_count"], 1);
                        }
                        if (cuent_type === "2") {
                            create_my_apply(JsonDate["vehicle_use_info_list"]);
                            pagenum1(JsonDate["use_data_count"], page);
                        }
                    }
                }
            };
        }
    </script>
{% endblock %}
